<template>
  <div id='products'>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><a href="#/">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="#/">商品列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="products">
      <el-table-column
        label="商品"
        prop="title"
      ></el-table-column>
      <el-table-column
        label="价格"
        prop="price"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="addToCart(scope.row)"
            type="warning"
          >加入购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {
      
    }
  },
  computed: {
    ...mapState('products', ['products'])
  },

  created(){
    this.asyncGetAllProducts()
  },

  methods: {
    ...mapActions('products', ['asyncGetAllProducts']),

    // 添加购物车
    ...mapMutations('cart', ['addToCart', 'deleteFromCart'])
  }
}
</script>